<template>
	<view class="container">
		<page-nav class="custom-title" title="股权投资" :leftShow="false"> </page-nav>
		</u-navbar>
		<view style="width: 100%; text-align: left;margin-left: 20rpx;  margin-top: 20rpx;margin-bottom: 20rpx;">
			<image src='https://www.xrskfw.com/static/images/home/tzly.png' mode="widthFix" style="width: 150rpx; "></image>
		</view>
		<view class="body">
			<u-grid :col="3" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in datalist" :key="index">
					<navigator :url="item.url" hover-class="none" class="carditem">
						<image :src="item.img" mode="widthFix" class="carditem-img"></image>
						<view class="carditem-name">{{ item.name }}</view>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="width: 100%; text-align: left; margin-left: 20rpx; margin-top: 20rpx;margin-bottom: 20rpx;">
			<image src='https://www.xrskfw.com/static/images/home/hytz.png' mode="widthFix" style="width: 150rpx; "></image>
		</view>
		<view class="part2">

			<u-grid :col="3" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in datalist" :key="index">
					<view class="partitem" :class="{ activepartitem: currentidx===index}" @click="activepage(index)">
						{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="padding: 0rpx 30rpx 0rpx 30rpx;">
			 
			<view class="news-list">
				<navigator hover-class="none" class="news-item" v-for="(item, index) in invertList" :key="index">
					<image :src="item.photo" class="img" />
					<view class="left">
						<view class="info">
							<!-- {{item.title}} -->

							<view>{{item.project}}</view>
							<view class="noraml">{{item.typeStr}}</view>
						</view>
						<view class="info">
							<!-- {{item.title}} -->

							<view class="noraml">{{item.projectInfo}}</view>
							<view class="noraml">{{item.pubTime}}年</view>
						</view>

					</view>

				</navigator>
				<u-loadmore :status="status" />
			</view>
			 
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import { 
		hyallist
	} from '@/api/mock/home.js'
	 
	export default {
		data() {
			return {
				currentidx: 0,
				
				page: 1,
				_triggered: false,
				
				defaultImage: '/static/images/home/def.png', // 默认图片地址
				invertList: [],
				status: '',
				datalist: [{
						name: '高新技术企业',
						img: 'https://www.xrskfw.com/static/images/home/s1.png',
						url: ''
					},
					{
						name: '科技型中小企业',
						img: 'https://www.xrskfw.com/static/images/home/s2.png',
						url: ''
					},
					{
						name: '创新型中小企业',
						img: 'https://www.xrskfw.com/static/images/home/s3.png',
						url: ''
					},
					{
						name: '专精特新中小企业',
						img: 'https://www.xrskfw.com/static/images/home/s4.png',
						url: ''
					},
					{
						name: '专精特新小巨人企业',
						img: 'https://www.xrskfw.com/static/images/home/s5.png',
						url: ''
					},
					{
						name: '制造业单项冠军企业',
						img: 'https://www.xrskfw.com/static/images/home/s6.png',
						url: ''
					},
					{
						name: '制造业单项冠军产品',
						img: 'https://www.xrskfw.com/static/images/home/s7.png',
						url: ''
					},
					{
						name: '瞪羚企业',
						img: 'https://www.xrskfw.com/static/images/home/s8.png',
						url: ''
					},
					{
						name: '独角兽企业',
						img: 'https://www.xrskfw.com/static/images/home/s9.png',
						url: ''
					},
				]
			}
		},
		onLoad() {
			this.$u.vuex("tabbarIndex",3)
			const param = {
				type:1,
				current:1,
				size:1000
			}
			hyallist(param).then((res)=>{
				this.invertList = res.data.records;
				this.status = 'nomore'
				console.log("000000000000000",res)
			})
		},
		onReady() {

		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		onReachBottom() {
			// 后续将改为与后端联动
			if (this.page >= 3) return
			this.status = 'loading'
			this.page = ++this.page
			console.log(this.page)
			setTimeout(() => {
				this.list += 10
				if (this.page >= 3) this.status = 'nomore'
				else this.status = 'loading'
				 
			}, 1500)
		},
		methods: {
			activepage(index) {
				this.currentidx = index;
				console.log(index)
				const param = {
								type:this.currentidx+1,
								current:1,
								size:1000
							}
				hyallist(param).then((res)=>{
					this.invertList = res.data.records;
					this.status = 'nomore'
					console.log("000000000000000",res)
				})
			},
			 
		}
	};
</script>

<style lang="scss">
	.body {
		padding-left: 10rpx;
		padding-right: 10rpx;

		.carditem {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			line-height: 48rpx;
			padding: 0rpx 30rpx 0rpx 30rpx;

			&-img {
				width: 220rpx;
				height: 160rpx;

			}

			&-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				white-space: nowrap;
				color: #212121;
				margin-bottom: 25rpx;
			}
		}

	}

	.part2 {
		width: 98%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		line-height: 48rpx;
		padding-right: 10rpx;

		.partitem {
			width: 200rpx;
			background: #F2F2F2;
			border-radius: 5rpx;
			text-align: center;
			margin-bottom: 20rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #212121;
		}

		.activepartitem {
			width: 200rpx;
			background: #E9F2FF;
			border-radius: 5rpx;
			text-align: center;
			margin-bottom: 20rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #2E69FF;
		}
	}

	.news-list {
		margin-top: 30rpx;

		.news-item {
			&:not(:last-of-type) {
				padding: 0 0 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #eeeeee;
			}

			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				margin-left: 20rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info {
					min-width: 0;
					padding-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #212121;
					line-height: 36rpx;
				}

				.noraml {
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}


			}

			.img {
				flex-shrink: 0;
				width: 90rpx;
				height: 90rpx;
				border-radius: 10rpx;
				background-color: #82848a;
			}
		}
	}
</style>